<template>
  <div class="collection-goods-list">
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <van-empty description="暂无数据" v-if="dataList.length===0" />
      <van-list v-model="loading" :finished="finished" :finished-text="dataList.length>5?'没有更多了':''" @load="onLoad" :offset="50" :immediate-check="false">
        <div class="product-box" v-for="(item, index) in collectionGoods" :key="item.id" @click="productChange(item)">
          <div class="product-info" :key="index">
            <div class="imgPath">
              <van-image :width="$tools.toPX(180)" :height="$tools.toPX(180)" fit="contain" class="img" lazy-load :src="item.goods_img">
                <template v-slot:loading>
                  <van-loading type="spinner" size="24" />
                </template>
              </van-image>
            </div>
            <div class="detail">
              <div class="name van-multi-ellipsis--l2">{{item.goods_name}}</div>
              <div class="spec van-multi-ellipsis--l2">{{item.goods_tips}}</div>
              <div class="price-num">
                <div class="m-price">{{item.shop_price}}
                </div>
                <div class="collection-btn" :class="{active: !item.isFavorite}" @click.stop="goodsFavoriteFun(item,index)">{{item.isFavoriteTxt}}</div>
              </div>
            </div>
          </div>
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>
<script>
import mixins from '@/utils/mixins';
export default {
  name: 'CollectionGoods',
  mixins: [mixins],
  data () {
    return {
      isLoading: false,
      apiUrl: 'goodsFavorite',
      apiType: 'goods',
      paramsUrl: 'list'
    };
  },
  computed: {
    collectionGoods: {
      get () {
        return this.handleList(this.dataList) || [];
      },
      set (val) {
        this.dataList = val;
        console.log(val);
      }
    }
  },
  mounted () {
    this.getList('goodsFavorite', true);
  },
  methods: {
    // onRefresh () {

    // },
    // 商品收藏
    goodsFavoriteFun (data, i) {
      if (!localStorage.getItem('Token')) {
        this.$store.dispatch('setLogin', true);
        return;
      }
      this.$toast.loading({ duration: 0 });
      this.$API.goods.goodsFavorite({ id: data.id }, !data.isFavorite ? 'add' : 'cancel').then(res => {
        if (!res.code) {
          // this.dataList = this.dataList.map(item => {
          //   if (item.id === data.id) {
          //     item.isFavorite = !item.isFavorite;
          //     item.isFavoriteTxt = item.isFavorite ? '已收藏' : '收藏商品';
          //     this.$toast(item.isFavorite ? '收藏成功' : '取消收藏');
          //   }
          //   return item;
          // });
          this.getList('goodsFavorite', true);
        }
      });
    },
    productChange (item) {
      this.$router.push({ 'path': '/mall/goods', query: { sn: item.goods_sn } });
    },
    handleList (list) {
      this.dataList = list.map(item => {
        if (item.isFavoriteTxt) {
          return item;
        } else {
          item.isFavorite = true;
          item.isFavoriteTxt = '已收藏';
          return item;
        }
      });
      return this.dataList;
    }
  }
};
</script>
<style scoped lang="less">
.collection-goods-list {
  height: 100%;
  padding-top: 20px;
  box-sizing: border-box;
  overflow: auto;
  .product-box {
    padding-top: 0;
    margin-bottom: 0;
  }
}
</style>
